<template>
<!-- class="cart" -->
  <div class="cart">
   <nav-bar class="cart-nav">
     <div slot='center'>购物车({{getCarLength}})</div>
   </nav-bar>
   <!-- 商品的列表 -->
   <cart-list></cart-list>
   <!-- 底部汇总 -->
   <cart-bottom-bar></cart-bottom-bar>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
import { mapGetters } from 'vuex'
 import CartList from './childComps/CartList.vue'
import CartBottomBar from './childComps/CartBottomBar.vue'
export default {
  name: "Cart",
  computed:{
    ...mapGetters(['getCarLength'])
  },
   components: { NavBar, CartList, CartBottomBar }
}
</script>

<style scoped>
.cart{
 height: 100vh;

}
.cart-nav{
  background-color: var(--color-tint);
  font: 800;
  color: #fff;
}

/* 
 .cart{
    height: 100vh;
    position: relative;
    z-index: 5;
    background-color: #fff;
    overflow: hidden;
  }
  .nav-bar{
    background-color: var(--color-tint);
    color:#fff;
    position: relative;
    left: 0;
    top: 0;
  }
  .content{
    height: calc(100% - 44px - 49px - 40px);
    overflow: hidden;
  } */
 
</style>
